import type React from 'react';
import type { Transform2D } from '../../types';
import styles from './MatrixInfo.module.less';

interface MatrixInfoProps {
  matrix: Transform2D;
  cssTransform: string;
}

export const MatrixInfo: React.FC<MatrixInfoProps> = ({
  matrix,
  cssTransform,
}) => {
  // 将Transform2D对象转换为二维数组用于显示
  const matrixArray = [
    [matrix.a, matrix.c, matrix.e],
    [matrix.b, matrix.d, matrix.f],
    [0, 0, 1],
  ];

  return (
    <div className={styles.info}>
      <h3>矩阵信息</h3>

      <div className={styles.matrixValues}>
        <h4>变换矩阵</h4>
        <table>
          <tbody>
            {matrixArray.map((row) => (
              <tr key={`${row.join('-')}`}>
                {row.map((value) => (
                  <td key={`${value}`}>{value.toFixed(2)}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className={styles.cssTransform}>
        <h4>CSS 变换</h4>
        <code>{cssTransform}</code>
      </div>
    </div>
  );
};
